// 歌单标签组件
<template>
  <div class="song-item">
    <div class="item" v-for="(item, index) in data" :key="index">
      <router-link :to="'/music/details/' + item.id" tag="div">
        <img
          :src="item.picUrl || item.coverImgUrl"
          class="song-img"
          v-lazy="item.picUrl || item.coverImgUrl"
          :title="item.name"
        />
        <p class="song-name">{{ item.name }}</p>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'songItem',
  props: {
    data: Array,
  },
};
</script>

<style lang="scss" scoped>
.song-item {
  display: flex;
  flex-wrap: wrap;
  .item {
    padding: 15px;
    text-align: center;
    &:hover {
      .song-name {
        opacity: 1;
      }
    }
    .song-img {
      width: 120px;
      padding-bottom: 10px;
    }
    .song-name {
      color: white;
      font-weight: 500;
      font-size: 14px;
      opacity: 0.5;
      width: 120px;
      @include no-wrap;
    }
  }
}
</style>
